// 与 Vuex 相比，Pinia 不仅提供了一个更简单的 API，
// 也提供了符合组合式 API 风格的 API，最重要的是，
// 搭配 TypeScript 一起使用时有非常可靠的类型推断支持。

// pinia是直接默认就分模块的
import { defineStore } from "pinia";

// defineStore是用来创建 创建模块的方法 的
// 第一个参数就是模块的名称
// 第二个参数可以是选项式的写法

interface StateType {
  count: number;
  name: string;
  list: number[];
}

// 返回的这个函数最好按照约定用use开头
export const useCounterStore = defineStore("counter", {
  // state的ts类型可以使用as断言的方式
  // state: () => {
  //   return {
  //     count: 10 as number,
  //     name: "zhangsan" as string,
  //     list: [1, 2, 3] as number[],
  //   };
  // },

  // state的ts类型还可以使用interface的方式
  state: (): StateType => {
    return {
      count: 10,
      name: "zhangsan",
      list: [1, 2, 3],
    };
  },

  // 也可以这样定义
  // state: () => ({ count: 0 })

  // getters的ts类型是作为函数的返回值类型
  getters: {
    doubleCount(state): number {
      return state.count * 2;
    },
  },

  // actions没有state作为参数，可以直接使用this
  // 可以使用同步和异步
  actions: {
    increment() {
      setTimeout(() => {
        this.count++;
      }, 1000);
    },
  },
});

// import { ref, computed } from 'vue'
// import { defineStore } from 'pinia'

// export const useCounterStore = defineStore('counter', () => {
//   const count = ref(0)
//   const doubleCount = computed(() => count.value * 2)
//   function increment() {
//     count.value++
//   }

//   return { count, doubleCount, increment }
// })
